<template>
    <view class="out-box">
        <mescroll-uni :down="downOption" :up="upOption" @up="upCallback" @init="mescrollInit">
            <view class="space5"></view>
            <view 
                v-for="(item, index) in dataList" 
                class="list onePxBottom"
                :key="index" 
                @click="goToViewFun(item)" 
            >
                <view class="user-info">
                    <view class="user-name">张三</view>
                    <view class="time">2021-11-11 00:00:00</view>
                </view>
                <view class="state">
                    {{stateFun(index)}}
                    <image class="right-icon" src="../../static/defautl/user_nav_arrow.png" mode=""></image>
                </view>
            </view>
            
            <view class="hasNone"></view>
            <view v-if="error" class="error"></view>
        </mescroll-uni>
    </view>
</template>

<script>
export default {
    props:{},
    components: {
    },
    data() {
        return {
            mescroll: null,
            downOption: {
                use: false
            },
            upOption: {
                page: {
                    num: 0,
                    size: 20
                },
                noMoreSize: 10,
                empty: '',
                textNoMore: '-- END --',
                
            },
            dataList: [],
            hasNone: false,
            count: '',
            error: false
        }
    },
    watch:{
        keyWord(){
            clearTimeout(this.timer);
            this.timer = setTimeout( () => {
                this.count = 0;
                this.centerPage = 1;
                this.mescroll.resetUpScroll();
            },500)
        }
    },
    methods: {
		stateFun(i){
			if ( i === 0 ) {
				return '等待最终审核'
			} else if ( i === 1 ) {
				return '审核通过'
			} else if ( i === 2 ) {
				return '审核拒绝'
			} else {
				return '等待最终审核'
			}
		},
        // 初始化
        mescrollInit(mescroll) {
            this.mescroll = mescroll;
        },
        upCallback(mescroll) {
            console.log(this.mescroll.num, this.mescroll.size)
            if(mescroll.num == 1) this.dataList = [];
            
            setTimeout( () => {
                for( let i = 0; i < 25; i++){
                    this.dataList.push(i)
                    mescroll.endSuccess(0);
                }
            }, 1000)
            
            // this.app.api('/xxx/xx/x', this.datas, (r) => {
            // 	this.canChangeTab = true;
            // 	if(r.data.code == 0){
            // 		if(r.data.count == 0) mescroll.endSuccess(0);
            // 	}else{
            // 		mescroll.endSuccess(-1);
            // 	}
            // })
        },
        // 去详情
        goToViewFun(item) {
            uni.navigateTo({
                url: `/pages/registerApproval/approval?state=${item}`
            })
        },
        // 查询
        showListFun(){
            this.count = 0;
            this.centerPage = 1;
            this.mescroll.resetUpScroll();
        },
        // 重置
        resetFun(){
            this.mescroll.resetUpScroll();
        }
    },
    mounted() {
        
    }
}
</script>

<style scoped lang="scss">
.out-box{}
.list{
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    
    &:active {
        background: #fafafa;
    }
    
    .user-info{
        .user-name{
            font-size: 26rpx;
            color: #333;
            margin-bottom: 36rpx;
        }
        .time {
            color: #b5b5b5;
            font-size: 18rpx;
        }
        
    }
    
    .state {
        color: #666;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        
        .right-icon {
            margin-left: 18rpx;
            width: 24rpx;
            height: 24rpx;
        }
    }
    
    
}
</style>
